<template>
  <free-app bgType="image" :navbar="navbarOptions">
    <!-- 空 -->
    <!-- <view class="mt-[204rpx]">
      <view class="w-[360rpx] h-[281rpx] mx-auto">
        <image
          class="w-full h-full"
          mode="widthFix"
          src="/static/images/cart/cart-empty.png"
        ></image>
      </view>
      <view class="mt-[62rpx]">
        <button
          class="primary-btn w-[584rpx] h-[88rpx] leading-[88rpx] mx-auto"
        >
          去逛逛
        </button>
      </view>
    </view> -->

    <!-- 购物车有值 -->
    <view class="pb-[120rpx]">
      <view class="p-3 flex items-center justify-between">
        <view class="text-size-5 color-text-1 font-bold">
          购物车<text class="text-size-[20rpx] font-normal">(45)</text>
        </view>
        <view class="color-text-2 text-size-1" @click="handlerEdit">
          {{ edit ? "完成" : "编辑" }}
        </view>
      </view>
      <!-- shop -->
      <view class="p-3" v-for="item in 2" :key="item">
        <view
          class="px-[24rpx] py-[32rpx] bg-white rounded-[20rpx] flex items-center mb-[24rpx] shadow-1"
        >
          <image
            class="w-[40rpx] h-[40rpx] mr-[12rpx]"
            src="/static/images/icon/shop.png"
          ></image>
          <view class="text-size-3 color-text-1 font-500">
            永丰手机维修（芦墟镇）
          </view>
        </view>
        <!-- 商品 -->
        <view class="bg-white px-[24rpx] py-[32rpx] shadow-1 rounded-[20rpx]">
          <view
            class="flex pb-[32rpx] items-center"
            v-for="(goodsItem, index) in goods"
            :key="index"
          >
            <view class="mr-[22rpx]">
              <wd-checkbox :modelValue="true"></wd-checkbox>
            </view>
            <view class="pb-[24rpx] w-full">
              <GoodsCard :data="goodsItem" :showSpecBtn="true"> </GoodsCard>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- footer -->
    <view
      class="fixed bottom-0 z-9 p-3 flex items-center w-full box-border bg-white pb-[24rpx] shadow-1"
    >
      <view class="flex items-center flex-1">
        <wd-checkbox :modelValue="true"></wd-checkbox>
        <view class="text-size-3 color-text-1 font-500">全选</view>
      </view>
      <!-- 非编辑 -->
      <template v-if="!edit">
        <view class="color-text-3 text-[20rpx] mr-[18rpx]"> 已选 1 件 </view>
        <view
          class="flex items-center justify-between color-text-1 text-size-1 mr-[20rpx]"
        >
          <view class="text-size-3 color-text-1 font-500">合计</view>
          <view class="text-size-3 text-danger-6 font-500"
            >￥ <text class="text-size-7 font-500">129.9</text></view
          >
        </view>
        <view>
          <button class="primary-btn w-[200rpx] h-[80rpx] leading-[80rpx]" @click="jumpToOrder">
            去结算
          </button>
        </view>
      </template>
      <!-- 编辑删除状态 -->
      <template v-else>
        <button
          class="primary-btn w-[200rpx] h-[80rpx] leading-[80rpx] bg-danger-6"
        >
          删除
        </button>
      </template>
    </view>
  </free-app>
</template>

<script setup>
import { ref } from "vue";

import GoodsCard from "@/components/goods-card/index.vue";

// 导航栏配置
const navbarOptions = {
  title: "购物车",
  showBg: true,
  bgType: "image",
  placeholder: true,
};

const goods = ref(
  new Array(2).fill(null).map(() => ({
    imgUrl: "/static/images/temp/logo.png",
    title: "移修适用于苹果11 屏幕（标准）",
    description: "适配型号苹果12/苹果12Pro",
    price: "129.9",
    stock: 129,
    num: 0,
  }))
);
// 编辑状态
const edit = ref(false);
// 编辑
const handlerEdit = () => {
  edit.value = !edit.value;
};
const jumpToOrder=()=>{
  uni.navigateTo({
    url: '/pagesGoods/goodsOrder'
  })
}
</script>

<style lang="scss" scoped></style>
